<template>
  <view class="detail-container" v-show="show">
    <!-- 头部图片 -->
    <view class="header-image">
      <image :src="detail.smallimage" style="width: 100%;" mode="aspectFill"></image>
    </view>

    <!-- 内容区域 -->
    <view class="content-section" style="margin-top: 1rem;">
      <!-- 标题 -->
      <view class="title">{{detail.title}}</view>

      <!-- 基本信息 -->
      <view class="info-section">
        <view class="info-item">
          <text class="label">发布时间：</text>
          <text class="value">{{timestampToDateTimes(detail.createtime)}}</text>
        </view>
       
      </view>

      <!-- 描述 -->
      <view class="description">
        <rich-text :nodes="detail.content"></rich-text>
      </view>
    </view>

    <!-- 加载提示 -->
    <view class="loading" v-if="loading">加载中...</view>
  </view>
</template>

<script>
import { fetchContentDetail, baseUrl, timestampToDateTime } from '@/api/api.js'

export default {
  data() {
    return {
      id: '',
      detail: {},
      loading: true,
	  show:false
    }
  },
  onLoad(options) {
    if (options.id) {
      this.id = options.id
      this.fetchDetail()
    }
  },
  methods: {
	  timestampToDateTimes(time){
		return timestampToDateTime(time)  
	  },
    async fetchDetail() {
      try {
        const result = await fetchContentDetail(this.id)
        if (result.data) {
          // 处理图片路径
          this.detail = {
            ...result.data,
            smallimage: baseUrl + result.data.smallimage
          }
        }
		
		if(this.detail.url == null || this.detail.url == ""){
			this.show= true
		}else{
			uni.reLaunch({
				url:"/pages/web/web?url="+encodeURIComponent(this.detail.url)
			})
		}
		
		
      } catch (error) {
        console.error('获取详情失败:', error)
        uni.showToast({
          title: '获取详情失败',
          icon: 'none'
        })
      } finally {
        this.loading = false
      }
    }
  }
}
</script>

<style>
.detail-container {
  min-height: 100vh;
  background-color: #f8f8f8;
}

.header-image {
  width: 100%;
  height: 400rpx;
  overflow: hidden;
}

.header-image image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.content-section {
  margin-top: -50rpx;
  padding: 30rpx;
  background-color: #fff;
  border-radius: 30rpx 30rpx 0 0;
  min-height: 800rpx;
}

.title {
  font-size: 36rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 30rpx;
}

.info-section {
  display: flex;
  justify-content: space-between;
  margin-bottom: 30rpx;
  padding-bottom: 20rpx;
  border-bottom: 1rpx solid #eee;
}

.info-item {
  font-size: 24rpx;
  color: #666;
}

.label {
  margin-right: 10rpx;
}

.description {
  font-size: 28rpx;
  color: #333;
  line-height: 1.8;
}

.loading {
  text-align: center;
  padding: 30rpx;
  color: #999;
  font-size: 28rpx;
}
</style> 